<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>平台管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css"
          media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/css/plat-style.css" media="all">
    <link rel="stylesheet" href="/js/plugins/ztree/css/metroStyle.css">
    <style>
        thead tr th {
            text-align: center !important;
            font-weight: bold !important;
        }

        tr td {
            text-align: center !important;
        }

        .layui-card-header .goodsMoney {
            line-height: initial;
            position: absolute;
            right: 15px;
            top: 50%;
            margin-top: -7px;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body layui-form">
                    <div class="layui-card-header">贷款预约申请详情</div>
                    <!--隐藏域-->
                    <input type="hidden" value="${data.id}" id="bankId">
                    <input type="hidden" id="hiselectmanagerName">
                    <input type="hidden" id="hiselectmanagerId">

                    <div class="layui-tab">
                        <ul class="layui-tab-title">
                            <li class="layui-this">基本信息</li>
                            <li>申请人信息</li>
                        </ul>
                        <div class="layui-tab-content">
                            <%-- 基本信息--%>
                            <div class="layui-tab-item layui-show" style="overflow: auto">
                                <div class="layui-form-item" style="margin-top: 20px">
                                    <label class="layui-form-label" style="width: auto">贷款名称：</label>
                                    <div class="layui-form-mid layui-word-aux">${data.productTypeId}</div>
                                </div>
                                <div class="layui-form-item" style="margin-top: 20px">
                                    <label class="layui-form-label" style="width: auto">申请时间：</label>
                                    <div class="layui-form-mid layui-word-aux"><fmt:formatDate value="${data.applyTime}" pattern="yyyy-MM-dd HH:mm"/></div>
                                </div>
                                <div class="layui-form-item" style="margin-top: 20px">
                                    <label class="layui-form-label" style="width: auto">最后操作时间：</label>
                                    <div class="layui-form-mid layui-word-aux"><fmt:formatDate value="${data.lastOperateTime}" pattern="yyyy-MM-dd HH:mm"/></div>
                                </div>
                                <div class="layui-form-item" style="margin-top: 20px">
                                    <label class="layui-form-label" style="width: auto">最后操作人：</label>
                                    <div class="layui-form-mid layui-word-aux">${data.operator}</div>
                                </div>
                                <c:if test="${data.handleResult==1}">
                                    <div class="layui-form-item" style="margin-top: 20px">
                                        <label class="layui-form-label" style="width: auto">当前客户经理：</label>
                                        <div class="layui-form-mid layui-word-aux">${nowManager}</div>
                                    </div>
                                </c:if>
                                <label class="layui-form-label" style="width: auto">审核结果：</label>
                                <div class="layui-form-mid layui-word-aux">
                                    <c:if test="${data.handleResult == 1 }"><span style="color: green">预约成功</span></c:if>
                                    <c:if test="${data.handleResult == 2 }"><span style="color: red">预约失败</span></c:if>
                                    <c:if test="${data.handleResult == 3 }"><span style="color: blue">待处理</span></c:if>
                                </div>
                            </div>
                            <%-- 用户信息--%>
                            <div class="layui-tab-item" style="margin-top: 20px;overflow: auto">
                                <c:forEach items="${bankInfo}" var="datas">
                                    <div class="layui-form-item" style="margin-top: 20px">
                                        <label class="layui-form-label" style="width: auto">${datas.name}：</label>
                                        <div class="layui-form-mid layui-word-aux">${datas.writeValue}</div>
                                    </div>
                                </c:forEach>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>



<%--操作--%>
<div class="layui-form-item layui-layout-admin">
    <div class="layui-col-sm4">
        <div class="layui-footer" style="left: 0;">
            <a href="/bankloanapplyrecord/list" class="layui-btn layui-btn-normal">返回列表</a>
            <c:if test="${data.handleResult==3}">
                <button  data-method="fpmanager" id="fpmanagerBtn" data-type="auto" class="layui-btn layui-btn-danger">分配客户经理</button>
                <button id="noadopt"  class="layui-btn layui-btn-warm">不通过</button></div>
            </c:if>
            <c:if test="${data.handleResult==1}">
                <button  data-method="changeManager" id="changeManagerBtn" data-type="auto" class="layui-btn layui-btn-danger">变更客户经理</button>
                <button data-method="offset" data-type="auto" id="managerWindown" class="layui-btn layui-btn-normal">客户经变更踪记录</button>
            </c:if>
        </div>
    </div>
</div>

<script src="/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
<script src="/js/common.js"></script>
<script src="/js/plugins/ztree/jquery.ztree.core.js"></script>
<script>
    layui.config({
        //静态资源所在路径
        base : '/layuiadmin/'
    }).extend({
        //主入口模块
        index : 'lib/index'
    }).use([ 'index', 'form'],function() {
        var $ = layui.$, admin = layui.admin, element = layui.element, layer = layui.layer;

        var active = {
            //驳回退款申请
            rejectThis : function(id){
                layer.prompt({title: '驳回退款申请', formType: 2}, function(text, index){
                    $.ajax({
                        type: 'post',
                        url: '/order/handleRefundReject',
                        data: {'refundId': id,'rejectRemark':text},
                        dataType: 'json',
                        success: function (data) {
                            if (data.status) {
                                layer.msg(data.desc);
                                setTimeout(function () {
                                    window.location.reload();
                                }, 1000)
                            } else {
                                layer.msg(data.desc);
                            }
                        },
                        error: function (a,b,c) {
                            layer.msg("请检查页面信息是否正确");
                        }
                    });
                });
            },
            //客户经理变更记录弹窗
            offset: function(othis){
                var type = othis.data('type')
                    ,text = othis.text();

                layer.open({
                    title:'客户经理变更记录',
                    area:['700px','600px'],
                    type: 1
                    ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    ,id: 'layerDemo'+type //防止重复弹出
                    ,content: '<div id="process" style="margin-top:20px;margin-left: 20px "></div>'
                    ,btn: ['关闭']
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0 //不显示遮罩
                });
            },




            //分配客户经理弹窗
            fpmanager: function(othis){
                var type = othis.data('type')
                    ,text = othis.text();
                var inputHtml= ` <div class="layui-form-item" style="margin-top: 20px;margin-left: -10px;width: 90%;height: 10%">`+
                               `<label class="layui-form-label">备注:</label>`+
                               ` <div class="layui-input-block">`+
                               ` <input type="text"  id="remarksInput"  lay-verify="title" autocomplete="off"  class="layui-input">`+
                               `</div>`+
                              `</div><hr style="border: 0.1px solid GhostWhite">`
                layer.open({
                    title:'分配客户经理',
                    area:['700px','600px'],
                    type: 1
                    ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    ,id: 'layerDemo'+type //防止重复弹出
                    ,content:`<div id="demotree" style="margin-left:20px;font-size: 10px;height: 80%;overflow:auto"><ul style="font-size: 20px" id="treeDemo" class="ztree"></ul></div>`+inputHtml
                    ,btn: ['确定','关闭']
                    ,btn1:function () {
                        fpManagerFun();
                    }
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0 //不显示遮罩
                });
            },



            //改变客户经理弹窗
            changeManager: function(othis){
                var type = othis.data('type')
                    ,text = othis.text();
                var inputHtml= ` <div class="layui-form-item" style="margin-top: 20px;margin-left: -10px;width: 90%;height: 10%">`+
                    `<label class="layui-form-label">备注:</label>`+
                    ` <div class="layui-input-block">`+
                    ` <input type="text"  id="remarksInput"  lay-verify="title" autocomplete="off"  class="layui-input">`+
                    `</div>`+
                    `</div><hr style="border: 0.1px solid GhostWhite">`
                layer.open({
                    title:'变更客户经理',
                    area:['700px','600px'],
                    type: 1
                    ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    ,id: 'layerDemo'+type //防止重复弹出
                    ,content:`<div id="demotree" style="margin-left:20px;font-size: 10px;height: 80%;overflow:auto"><ul style="font-size: 20px" id="treeDemo" class="ztree"></ul></div>`+inputHtml
                    ,btn: ['确定','关闭']
                    ,btn1:function () {
                        fpManagerFun();
                    }
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0 //不显示遮罩
                });
            }
        };



        function fpManagerFun(){
            var name=$('#hiselectmanagerName').val();
            var id=$('#hiselectmanagerId').val();
            var bankId=$('#bankId').val();
            var remarks=$('#remarksInput').val();
            if(name==''){
                layer.msg("请选择一位客户经理。");
                return;
            }
            layer.confirm('确定分配给'+ name+'吗？',function(index){
                $.ajax({
                    url: "/bankloanapplytrack/save",
                    data: {'managerId': id,"remarks":remarks,"operator":"","loanApplyRecordId":bankId},
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        if(data.code==200){
                            layer.msg("分配成功");
                            setTimeout(function () {
                                window.location.reload();
                            }, 1000)
                        }else {
                            layer.msg("分配失败！");
                        }
                    }
                })
                layer.close(index);
            })
        }


        //不通过
        $('#noadopt').on('click',function () {
            var id=document.getElementById("bankId").value;
            $.ajax({
                url: "/bankloanapplyrecord/updateHandResult",
                data: {'id': id,'status':2},
                dataType: "json",
                type: "post",
                success: function (data) {
                    if (data.code==200) {
                        layer.msg(data.msg);
                        setTimeout(function () {
                            window.location.reload();
                        }, 1000)
                    } else {
                        layer.msg(data.msg);
                    }
                }
            })
        })

        //弹出按钮
        $('#managerWindown').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
            var divHtml=document.getElementById("process");
            divHtml.innerHTML='';
            var date='';
            var manager='';
            var czr="";
            var resHtml='';
            var remake='';
            var bankId=document.getElementById("bankId").value;
            $.ajax({
                url: "/bankloanapplytrack/listDate",
                data: {'id': bankId},
                dataType: "json",
                type: "post",
                success: function (data) {
                    var res=data.data;
                    for (var i = 0; i <res.length ; i++) {
                        if(res[i].crateTime!=null){
                            date=res[i].crateTime.slice(0,10)
                        }
                        manager=res[i].managerId;
                        czr=res[i].operator;
                        remake=res[i].remarks;
                        resHtml=resHtml+
                            `<ul class="layui-timeline">`+
                            `<li class="layui-timeline-item">`+
                            `<i class="layui-icon layui-timeline-axis">&#xe63f;</i>`+
                            `<div class="layui-timeline-content layui-text">`+
                            `<h3 class="layui-timeline-title">`+date+`</h3>`+
                            `<h4>`+
                                `<div style="width: 70px;color:black;text-align: left;float: left">客户经理：</div>`+manager+
                            `</h4>`+
                            `<h4>`+
                                `<div style="width: 70px;color:black;text-align: left;float: left">操&ensp;作&ensp;人：</div>`+czr+
                            `</h4><br>`+
                            `<h4>`+
                                `<div style="width: 70px;color:black;text-align: left;float: left">备&ensp;&ensp;&ensp;&ensp;注：</div>`+remake+
                            `</h4>`+

                            `</div></li></ul>`;
                    }
                    divHtml.innerHTML=resHtml;
                }
            })
        });


        $('#fpmanagerBtn').on('click',function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
            $.fn.zTree.init($("#treeDemo"), setting, treeNodes); //初始化树
        })
        $('#changeManagerBtn').on('click',function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
            $.fn.zTree.init($("#treeDemo"), setting, treeNodes); //初始化树
        })

    });

    var treeNodes=[
        {"id":"1a","name":"金鼎支行","isParent":"1","pId":"b"},
        {"id":"2","name":"斗门支行","isParent":"1","pId":"b"},
        {"id":"4","name":"张三丰","isParent":"1","pId":"2"},
        {"id":"5","name":"张三丰","isParent":"1","pId":"2"},
        {"id":"6","name":"张三丰","isParent":"1","pId":"2"},
        {"id":"7","name":"张三丰","isParent":"1","pId":"2"},
        {"id":"8","name":"张三丰","isParent":"1","pId":"2"},
        {"id":"9","name":"张三丰","isParent":"1","pId":"2"},
        {"id":"10","name":"张三丰","isParent":"1","pId":"2"},
        {"id":"11","name":"张三丰","isParent":"1","pId":"2"},
        {"id":"12","name":"张三丰","isParent":"1","pId":"2"},
        {"id":"13","name":"张三丰","isParent":"1","pId":"2"},
        {"id":"14","name":"张三丰","isParent":"1","pId":"2"},
        {"id":"15","name":"张三丰","isParent":"1","pId":"2"},
        {"id":"16","name":"张三丰","isParent":"1","pId":"2"},
        {"id":"17","name":"张三丰","isParent":"1","pId":"2"},
    ];//id是节点id，pId是父节点id，通过他们的关系来绑定

    var setting = {//树的设置

        //外观
        view: {
            showIcon: true, //设置是否显示节点图标
            showLine: true, //设置是否显示节点与节点之间的连线
            fontCss : {color:"black",size:10}//字体颜色和大小
        },

        //数据类型
        data: {
            simpleData: {
                enable: true, //设置是否启用简单数据格式（json格式）
            }
        },

        //回调事件
        callback: {
            onClick: zTreeOnClick
        }

    };


    function zTreeOnClick(event, treeId, treeNode) {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var sNodes = treeObj.getSelectedNodes();
        if (sNodes.length > 0) {
            var isParent = sNodes[0].isParent;
            var parentTId= sNodes[0].parentTId;
            if(isParent==false && parentTId!=null){
                document.getElementById("hiselectmanagerName").value=treeNode.name;
                document.getElementById("hiselectmanagerId").value=treeNode.id;
            }
        }
       // var a=    "id="+treeNode.id + ", name=" + treeNode.name + ",pId=" + treeNode.pId;
    };



    var zTree;

    $(document).ready(function(){//全部加载完后执行
        $.fn.zTree.init($("#treeDemo"), setting, treeNodes); //初始化树
    });

</script>
</body>
</html>